<template>
  <div class='me-type type-choice' :class="[showKinds ? 'show' : '']" id='j-m-typeChoiceList'>
    <div class='head'>
      <div class='title'>产品类目</div>
      <div class='close' @click="hideKinds"></div>
    </div>
    <div class='list'>
      <ul>
        <div v-for="(item,index) in tabs" :key="item.id">
          <li class='j-product-type' :class="[item.checked ? 'active' : '']" @click="changeTab(index)">{{item.name}}<span></span></li>
          <li class='j-product-type sub-type' v-for="(v,k) in item.list" :key="v.id"  :class="[v.checked ? 'active' : '']" @click="changeTab(index,k)">
            {{v.name}}<span></span></li>
        </div>
      </ul>
    </div>
  </div>
</template>

<script>
    export default {
        props:['showKinds','tabs'],
        name: "kindsList",
        data(){
          return{
          }
        },
        methods:{
          hideKinds(obj){
            this.$emit('hideKinds',obj)
          },
          changeTab(index,k){
            if(index===0 && typeof k == 'number') return
             this.hideKinds({index,k})
          }
        }
    }
</script>

<style scoped>

</style>
